<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <link rel="shortcut icon" href="logo.ico">
    <th:block th:include="include :: header('主页')"/>
    <style>
        [v-cloak] {
            display: none;
        }
        .contain {
            padding: 1%;
            height: 100%;
        }
        .cacheLine {
            width: 100%;
            border-radius: 5px;
            border: 2px solid #eacf02;
        }
        .boxTitle {
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-indent: 12px;
            border-bottom: 1px solid #e7eaec;
            font-weight: 600;
            font-size: 15px;
        }
        .boxMain {
            width: 100%;
            height: 300px;
        }
        .chartBox {
            width: 100%;
            height: 450px;
            margin-top: 35px;
            display: flex;
            justify-content: space-between;
        }
        #line {
            width: 67%;
            height: 100%;
        }
        #pie {
            width: 60%;
            height: 100%;
        }
        #line:hover, #pie:hover {
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .5);
        }
    </style>
</head>
<body class="white-bg">
<div class="contain">
    <!-- NG缓存线报表 -->
<!--    <div class="cacheLine">-->
<!--        <div class="boxTitle">缓存线&#45;&#45;NG状态</div>-->
<!--        <div class="boxMain">-->
<!--            <el-table :data="NGList" border height="300" style="width: 100%">-->
<!--                <el-table-column prop="shelfCode" label="缓存线编号" align="center"></el-table-column>-->
<!--                <el-table-column prop="memo" label="物料备注" align="center"></el-table-column>-->
<!--                <el-table-column label="物料名称" align="center">钢卷</el-table-column>-->
<!--                <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>-->
<!--                <el-table-column prop="updateTime" label="更新时间" align="center"></el-table-column>-->
<!--            </el-table>-->
<!--        </div>-->
<!--    </div>-->
    <!-- 图表 -->
    <div class="chartBox">
        <div id="line"></div>
        <div id="pie"></div>
    </div>
</div>
<div th:include="include::footer"></div>
<script th:src="@{/ajax/libs/echarts/echarts.js}"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '.contain',
        data: {
            NGList: [],
            dayList: [],
            BillInMasterCountWeek: [],
            BillOutMasterCountWeek: [],
            CellInfoCount: ''
        },
        methods: {
            getBeforeDate(n){
                var d = new Date();
                var year = d.getFullYear();
                var mon = d.getMonth() + 1;
                var day = d.getDate();
                if(day <= n){
                    if(mon > 1){
                        mon = mon - 1;
                    }else{
                        year = year - 1;
                        mon = 12;
                    }
                }
                d.setDate(d.getDate() - n);
                year = d.getFullYear();
                mon = d.getMonth() + 1;
                day = d.getDate();
                var s = (mon < 10 ? ('0' + mon) : mon) + "-" + (day < 10 ? ('0' + day) : day);
                return s;
            },
            getNGCacheLine(){
                var that = this;
                $.ajax({
                    cache: true,
                    type: "POST",
                    url: "/ShelfPlan/findList",
                    data: {
                        state: '-1'
                    },
                    async: false,
                    error: function(request){
                        $.modal.alertError("系统错误");
                    },
                    success: function(data){
                        var list = data.rows;
                        for(var i = 0; i < list.length; i++){
                            if(list[i].createTime != null){
                                list[i].createTime = list[i].createTime.slice(0, 19);
                            }
                            if(list[i].updateTime != null){
                                list[i].updateTime = list[i].updateTime.slice(0, 19);
                            }
                        }
                        that.NGList = data.rows;
                    }
                });
            },
            getCountWeek(){
                var that = this;
                $.ajax({
                    cache: true,
                    type: "POST",
                    url: "/main/findMap",
                    data: {},
                    async: false,
                    error: function(request){
                        $.modal.alertError("系统错误");
                    },
                    success: function(data){
                        that.BillInMasterCountWeek = data.BillInMasterCountWeek;
                        that.BillOutMasterCountWeek = data.BillOutMasterCountWeek;
                        that.CellInfoCount = data.CellInfoCount;
                    }
                });
            },
            drawLine(){
                var line = echarts.init(document.getElementById('line'));
                line.setOption({
                    color: ['#00f2f1', '#ed3f35'],
                    title: {
                        text: '出入库量',
                        x: '3%',
                        y: '8px'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        right: '3%',
                        top: '8px',
                        textStyle: {
                            color: '#000'
                        }
                    },
                    grid: {
                        top: '20%',
                        left: '4%',
                        right: '10%',
                        bottom: '3%',
                        show: true,
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.dayList,
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            interval: 0,
                            color: '#000'
                        },
                        axisLine: {
                            show: false
                        },
                        name: '日期',
                        nameLocation: 'end',
                        nameTextStyle: {
                            color: 'green',
                            fontSize: 16,
                            padding: 10
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            color: '#000'
                        },
                        name: '数量',
                        nameLocation: 'end',
                        nameTextStyle: {
                            color: 'green',
                            fontSize: 16,
                            padding: 10
                        }
                    },
                    series: [
                        {
                            name: '入库',
                            type: 'line',
                            smooth: true,
                            data: this.BillInMasterCountWeek
                        }, {
                            name: '出库',
                            type: 'line',
                            smooth: true,
                            data: this.BillOutMasterCountWeek
                        }
                    ]
                }, true);
            },
            drawPie(){
                var pie = echarts.init(document.getElementById('pie'));
                pie.setOption({
                    title: {
                        text: '货位占比',
                        x: '3%',
                        y: '8px'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a}<br/>{b}数量：{c}<br/>比重：{d}%'
                    },
                    series: [
                        {
                            name: '货位占比',
                            type: 'pie',
                            selectedMode: 'single',
                            radius: ['50%', '70%'],
                            clockwise: false,
                            label: {
                                normal: {
                                    position: 'outside',
                                    formatter: '{b}'
                                }
                            },
                            label: {
                                formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                                backgroundColor: '#F6F8FC',
                                borderColor: '#8C8D8E',
                                borderWidth: 1,
                                borderRadius: 4,
                                rich: {
                                    a: {
                                        color: '#6E7079',
                                        lineHeight:0,
                                        align: 'center'
                                    },
                                    hr: {
                                        borderColor: '#8C8D8E',
                                        width: '100%',
                                        borderWidth: 1,
                                        height: 0
                                    },
                                    b: {
                                        color: '#4C5058',
                                        fontSize:14,
                                        fontWeight: 'bold',
                                        lineHeight: 10
                                    },
                                    per: {
                                        color: '#fff',
                                        backgroundColor: '#3BA5D9',
                                        padding: [3, 4],
                                        borderRadius: 4
                                    }

                                }
                            },
                            data: [
                                {value: 858-this.CellInfoCount, name: '占用'},
                                {value: this.CellInfoCount, name: '空闲'}
                            ]
                        }
                    ],
                    graphic: {
                        elements: [
                            {
                                type: 'text',
                                left: 'center',
                                top: '43%',
                                style: {
                                    text: '总货位',
                                    fontSize: 13,
                                    textAlign: 'center',
                                    width: 30,
                                    height: 30,
                                    fill: 'darkgray'
                                }
                            },
                            {
                                type: 'text',
                                left: 'center',
                                top: '52%',
                                style: {
                                    text: '858',
                                    fontSize: 18,
                                    textAlign: 'center',
                                    width: 30,
                                    height: 25,
                                    fill: '#3BA5D9'
                                }
                            }
                        ]
                    }
                })
            }
        },
        created(){
            this.getNGCacheLine();
            this.getCountWeek();
            for(var j = 0; j < 7; j++){
                this.dayList.push(this.getBeforeDate(j));
            }
        },
        mounted(){
            this.drawLine();
            this.drawPie();
        }
    })
</script>
</body>
</html>
